<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>康佳结算</title>
<base href="<%=request.getContextPath() %>\">
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="js/area.js"></script>
		<script type="text/javascript">
			$(function(){
			
				//城市联动操作
				
				//加载省
				all_citys.forEach(function(v,i){
					$("#provice").append($("<option>").text(v.name).attr("index",i))
				})
				
				//联动操作
				pliandong()
				
				//省的change事件
				$("#provice").change(function(){
					pliandong();
				})			
				//市的change事件
				$("#city").change(function(){
					var proindex=$("#provice>option:selected").attr("index");
					var disindex=$("#city>option:selected").attr("index");
					loaddistrict(proindex,disindex);
				})

				dizhi();	
				xiugaidizhi();
				shanchudizhi();
				shuju();
				shezhimoren();
				xianzhi();
				tijiao();
				
				
			})
			
			//地址操作
			function dizhi(){
				var mr="设为默认";
				var mrs="默认地址";
				<c:forEach var="k" items="${addresslist}" varStatus="vs"> 
				var di="${fn:length(addresslist)}";
					var	i=${vs.count}-1;
				var addisdefault="${k.addisdefault}";	//通过默认地址判断
					if(addisdefault==0){
						$(".dzxinxi>li:eq("+i+")").addClass("background_img");
						console.log("默认");
						$(".dzxinxi>li").not(".background_img").addClass("background_imgs");
						$(".background_img .clear_cur2 .morendizhi").text(mrs)
					
					}else{
						console.log("不默认");
						$(".dzxinxi>li").not(".background_img").addClass("background_imgs");
						$(".background_imgs .clear_cur2 .morendizhi").text(mr)	
					}					
					if(di>0){	//当地址不为零时显示地址
						$(".dizhinaniu>.btn").hide();
						$(".dizhinaniu>.dzcont").css({"display":"block"});
					}
					</c:forEach>
					$("#btn_xinzen").click(function(){		//点击立即新增按钮新增地址
						$(".adddzpager").css("display","block");
						console.log("dsaf")
					})
					$(".gbimg").click(function(){	/*点击右上图片关闭 */
						$(".adddzpager").hide();
						$(".dizhinaniu>.dzcont").css({"display":"block"});
					});
					$(".btn_xz").click(function(){		// 点击添加地址添加地址
						$(".adddzpager").css("display","block");
					})

			}							
			
			//修改地址
			function xiugaidizhi() {
				$(".edit>.xg>img").click(function(){
					var addrssid=$(this).attr("value");
					$(".dzbtnbc").val(addrssid);
					$.ajax({
						type:"post",
						url:"jiesuan",
						data:"v=xiugai&addrssid="+addrssid,
						success:function(msg){
							$(".adddzpager").find("[name='addname']").val(msg.addname);				
							var province=msg.province;
							var city=msg.city;
							var county=msg.county;
							//加载省
							$(".adddzpager").find("[name='provice']").val(province);							
							var proindex=$("#provice>option:selected").attr("index");							
							loadcity(proindex);
							//加载市
							$(".adddzpager").find("[name='city']").val(city);
							var disindex=$("#city>option:selected").attr("index");
							loaddistrict(proindex,disindex);
							
							//加载当前县或区
					 		$(".adddzpager").find("[name='district']").val(county);
							
							$(".adddzpager").find("[name='detailedaddress']").val(msg.detailedaddress);
							$(".adddzpager").find("[name='addphone']").val(msg.addphone);
			 			dizhi();
							var addisdefault=msg.addisdefault;
						if(addisdefault==0){						
							$(".adddzpager").find("[name='addisdefault']").prop("checked",true);
							
							console.log($(".addisdefault").is(":checked"))
						}else{						
							/* $(".adddzpager").find("[name='addisdefault']").removeAttr("checked"); */
							$(".adddzpager").find("[name='addisdefault']").prop("checked", false);  
							console.log($(".addisdefault").is(":checked"))
						}
							$(".adddzpager").css("display","block");
								
						}
					})
					//1、获取当前地址的主键id
					//2、利用ajax，将主键传到Servlet  ：实体类   fastJson   实体类对象专程json数据
					
				})
			}
			
			//删除地址
			function shanchudizhi() {
				$(".edit>.lj>img").click(function(){
					var addrssid=$(this).attr("value");
					$(this).parents("li").remove();
					$.ajax({
						type:"post",
						url:"jiesuan",
						data:"v=shanchu&addrssid="+addrssid,
						success:function(msg){
							if(msg.res){
								dizhi();
								
							}else{
								alert("删除失败")
							}
						}
					})
				})
			}
			//加载市
			function loadcity(pindex){
				$("#city>option").remove();
				all_citys[pindex].children.forEach(function(v,i){
					$("#city").append($("<option>").text(v.name).attr("index",i))
				})
			}
			//加载县/区
			function loaddistrict(pindex,dindex){
				$("#district>option").remove();
				all_citys[pindex].children[dindex].children.forEach(function(v,i){
					$("#district").append($("<option>").text(v.name).attr("index",i))
				})
			}
			//省联动操作
			function pliandong(){
				//加载当前市
				var proindex=$("#provice>option:selected").attr("index");
				loadcity(proindex);
				
				//加载当前县或区
				var disindex=$("#city>option:selected").attr("index");
				loaddistrict(proindex,disindex);
			}
			//做最后的结算数据
			function shuju(){
				var ss=0;
				var price=0;
				<c:forEach var="k" items="${xiangqinglist}" > 
					var shuliang="${k.scount}";
					 ss+=parseInt(shuliang);		//商品数量
					var jia="${k.sprice*k.scount}";
					price+=parseInt(jia)			//商品价格
				</c:forEach>
		 		$(".spshuliang").html(ss);
		 		$(".jia").html(price);
		 		$(".price").html(price);
		 		
			}
			//设置默认地址按钮
			function shezhimoren() {
				$(".morendizhi").click(function(){
					var addrssid=$(this).attr("value");
					$(".dzxinxi li").removeClass("clear_fix background_img");
					$(".dzxinxi li").removeClass("clear_fix background_imgs");
					$(".dzxinxi li").addClass("clear_fix background_imgs");
					$(this).parents("li").removeClass("clear_fix background_imgs");
					$(this).parents("li").addClass("clear_fix background_img");
					
					$(".dzxinxi li .morendizhi").text("设为默认");
					$(this).text("默认地址");
					$.ajax({
						type:"post",
						url:"jiesuan",
						data:"v=shezhi&addrssid="+addrssid,
						success:function(msg){
							if(msg.res){
								/* dizhi(); */
								/* window.location.href="jiesuan?"; */
								
							}else{
								alert("设置失败");
							}
						}
					})
				})
			}
			//新增限制
			function xianzhi(){			
				$(".dzbtnbc").click(function(){					
				var ss=$(".adddzpager").find("[name='addname']").val();	
				var mm=$(".adddzpager").find("[name='detailedaddress']").val();	
				var p=$(".adddzpager").find("[name='addphone']").val();	
				var slen=ss.length;
				var mlen=mm.length;
					if(mlen>30){
						alert("输入地址太长啦")
						return false;
					}
					if(ss==null||ss==undefined||ss==""){
						alert("请输入姓名")
						return false;
					}
					if(slen>25){
						alert("姓名太长了o")
						return false;
					}
					if(mm==null||mm==undefined||mm==""){
						alert("请输入详细地址")
						return false;
					}
					if(isPhoneNo(p)==false){
						alert("请正确输入手机号")
						return false;
					}
				})
			}
			//判断手机号
			function isPhoneNo(phone) {
				var pattern =/^1[3-9]+\d{9}$/;
				return pattern.test(phone);
			}
			//提交按钮弹出结算层
			function tijiao(){
				// 提交弹出
					var sf;
					var shi;
					var qu;
					var xiangxi;
					var name;
					var phone;
					var danhao;
					var price;
					var price;
					var dizhi;
				$(".tijiao_btn").click(function(){
										
					//生成时间戳
					var dt = new Date(); 
					var ux = Date.UTC(dt.getFullYear(),dt.getMonth(),dt.getDay(),dt.getHours(),dt.getMinutes(),dt.getSeconds(),dt.getMilliseconds());
					 danhao="lq"+ux;
										
						 sf=$(".dzxinxi").find(".background_img .sf").text();
						 console.log(sf)
						 shi=$(".dzxinxi").find(".background_img .shi").text();
						 qu=$(".dzxinxi").find(".background_img .qu").text()
						 xiangxi=$(".dzxinxi").find(".background_img .xiangxi").text()
						 name=$(".dzxinxi").find(".background_img .name").text()
						 phone=$(".dzxinxi").find(".background_img .number_ber").text()
					if(sf==null||sf==""||shi==null||shi==""||qu==null||qu==""||xiangxi==null||xiangxi==""||name==null||name==""||phone==null||phone==""){
						$(".chongfuselect").text("地址有误噢！找不到您的收货地址呢");
						$(".chongfuselect").fadeIn(1000);
						$(".chongfuselect").fadeOut(1000);
						return false;
					}else{
						$(".jiesuan_footer").css("display","block");
					}
				
					 price=$(".price").html();	
					 dizhi=sf+shi+qu+xiangxi;
					$(".xz_danhao").html(danhao);
					$(".xz_name").html(name);
					$(".xz_dizhi").html(dizhi);
					$(".xz_price").html(price);
					
				})
				
				//右上关闭
				$(".header_gbimg").click(function(){
					$(".jiesuan_footer").css("display","none");
				})

			//我再想想点击事件
			$(".fukuan_xx").click(function(){	
				$.ajax({
					type:"post",
					url:"jiesuan",
					data:"v=xiangxiang&orid="+danhao+"&price="+price+"&oruser="+name+"&orphone="+phone+"&ordizhi="+dizhi+"&sid=${sid}&sccount=${sccount}",
					success:function(msg){								
						if(msg.res){
							 window.location.href="huiyuan?"; 
						}else{
							alert("添加失败");
						}
					}
				})				
			})
			//立即付款
			$(".fukuan_queren").click(function() {
				$.ajax({
					type:"post",
					url:"jiesuan",
					data:"v=fukuan&orid="+danhao+"&price="+price+"&oruser="+name+"&orphone="+phone+"&ordizhi="+dizhi+"&sid=${sid}&sccount=${sccount}",
					success:function(msg){								
						if(msg.res){
							alert("付款成功");
							 window.location.href="shouye?";
						}else{
							alert("添加失败");
						}
					}
				})	
			})
		}
		</script>
		<link rel="stylesheet" type="text/css" href="css/jiesuans.css" />
		<style type="text/css">
			.chongfuselect{
				position: fixed;
				top: 206px;
				left: 632px;
				background-color: rgba(0,0,0,0.5);
				color: #fff;
				width: 250px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				border-radius: 5px;
				font-size: 14px;
				z-index: 9999999;
				display: none;
			}
		</style>
	</head>
	<body id="tbody">
		<div class="chongfuselect">
			<p>该订单状态无法取消</p>
		</div>
		<div class="my-header">
				<jsp:include page="include/header.jsp"></jsp:include>
		</div>
		<div class="container">
		<!-- <iframe src="include/header.jsp" width="100%" height="100%"></iframe> -->
				<!-- 收货地址弹出层 -->
			<div class="adddzpager">
				<div class="adddz">
					<div class="guanbi">
						<div class="gbtitle">
							<h4>收货人信息</h4>
							<div class="gbimg">
								<img src="imgs/lingimgs/dzgb.png" />
							</div>
						</div>						
					</div>
		<div class="juzhong">
			<form action="jiesuan?v=huoqudizhi&sid=${sid}&sccount=${sccount}" method="post">
						<div class="form-group">
							<label class="col-xs-2 control-label">收货人姓名
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" placeholder="收货人姓名" name="addname"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">收货地区
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<div class="dzliandong">
									<select id="provice" name="provice"></select>
									<select id="city" name="city"></select>
									<select id="district" name="district"></select>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">详细地址
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" placeholder="请填写详细的地址门牌号码,无需重复填写地区" name="detailedaddress"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">手机
								<span class="text-danger">*</span>
							</label>
							<div class="col-xs-7">
								<input type="text" class="form-control" placeholder="收货人手机号码" name="addphone"/>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-5 ">
								<div class="checkbox">
									<label>
										<input type="checkbox" name="addisdefault" class="addisdefault"/>
										设置为默认收货地址
									</label>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-5 ">
								<div class="checkbox">
									<button type="submit" class="dzbtnbc" name="dzbtnbc">保存</button>
								</div>
							</div>
						</div>
				</form>	
					</div>
				</div>
			</div>
			
			<!-- 当前选择页面路径 -->
			<div class="lujing">
				首页>购物车>订单确认
			</div>
			<div class="cont">
				<h1>订单确认</h1>
				<span>Checkout</span>
			</div>
			<!-- 订单收获信息 -->
			<div class="hold">
				<!-- 收货地址 -->
				<div class="dizhi">
						<div class="shouhuorenxinxi"><h3>收货人信息</h3></div>
						<div class="dizhinaniu" style="padding: 15px;">
								<button class="btn" id="btn_xinzen">立即新增收货地址</button>
								<!-- 收货信息接受面 -->
								<div class="dzcont">
									<ul class="dzxinxi">
										<!-- 地址 -->
									 	<c:forEach var="k" items="${addresslist}" > 
										<li class="clear_fix">
											<div class="clear_cur">
												<div class="name_addr">							
													<span class="name">${k.addname}</span>
													<span class="number">+<span class="number_ber">${k.addphone}</span></span>
												</div>
												<div class="name_maddr">
													<span class="sf">${k.province}</span>
													<span class="shi">${k.city}</span>
													<span class="qu">${k.county}</span>
													<p class="xiangxi">${k.detailedaddress}</p>
												</div>
											</div>
											<div class="clear_cur2">
												<span class="morendizhi" value="${k.addrssid}">默认地址</span>
												<div class="edit">
													<span class="xg">
													<img src="imgs/lingimgs/jsdizhi.png" value="${k.addrssid}">
													</span>
													<span class="lj">
													<img src="imgs/lingimgs/jslaji.png" value="${k.addrssid}">
													</span>
												</div>
											</div>
										</li>									
								</c:forEach>												
									</ul>
									<div class="btn_xz2"><button class="btn_xz">新增收货地址</button></div>
								</div>
								
						</div>
				</div>
				<!-- 配送方式 -->
				<div class="peisong">
					<h3>配送方式</h3>
					<li><img src="imgs/lingimgs/jsqd.png" style="margin-right: 8px;position: relative;top:3px ;">快递</li>
				</div>
				<!-- 支付方式 -->
				<div class="peisong">
					<h3>支付方式</h3>
					<li class="zhifufangshi">
						 <img src="imgs/lingimgs/jsqd.png" style="margin-right: 8px;position: relative;top:3px ;">
						<img src="imgs/lingimgs/jswx.png" style="margin-right: 3px;position: relative;top:6px;">
					微信支付</li>
				</div>		
				<!-- 购物清单 -->
				<div class="gouwudan">
						<h3 style="display: inline-block;">购物清单</h3>
						<a href="gwc" style="color: #767676;text-decoration: none;float: right;">返回购物车修改</a>
						<div class="chechout_cart">
							<ul class="rows_header" style="background: #efefef;margin-top: 15px;border: 1px solid #ddd;">
								<li style="width: 483px;padding:0 0 0 50px; text-align: center;">商品描述</li>
								<li style="width: 147px;padding:0 15px;text-align: center;">单价</li>
								<li style="width: 147px;padding:0 15px;text-align: center;">数量</li>
								<li style="width: 148px;padding:0 0 0 19px;text-align: center;">小计</li>
							</ul>
								
					<c:forEach var="k" items="${xiangqinglist}" > 
							<ul class="rows_held">
								<li class="row_miaoshu">
									<div class="ms_img"><img src="${k.pho_img}"></div>
									<div class="ms_cos">
										<div class="fubiao_id_div">
										<span class="fubiao_id" vulue="${k.sid}">${k.cname}</span>
										</div>
										<div class="miaoshu_shuxing">
										<c:forEach var="kk" items="${k.list}" > 
										<p class="miaoshu"style="float: left">${kk.atvname}</p>
										</c:forEach>
										</div>
									</div>
								</li>
						
								<li class="row_danjia">￥<span>${k.sprice}</span></li>
								
								<li class="row_shuliang">×<span>${k.scount}</span></li>
								<li class="row_ji">￥<span>${k.sprice*k.scount}</span></li>
							</ul>
					</c:forEach>
					
									
						</div>
					</div>	
				<!-- 账单结算 -->
				<div class="chechout_price">
						<div class="out_dd">
							<h3 style="font-size: 16px;font-weight: 600;margin-bottom: 10px;">订单备注</h3>
							<textarea name="memo" rows="3"class="ms_cos3" placeholder="【订单备注】国之栋梁请优先配送"></textarea>
						</div>	
						<div class="out_fq">
							<div class="pull_right">
							<ul style="margin-bottom: 0px">
								<li class="right_flow">
									<div class="dts">可得积分:</div>
									<div class="dds">0分</div>
								</li>
								<li class="right_flow">
									<div class="dts"><span class="spshuliang">1</span>件商品,总商品金额:</div>
									<div class="dds">￥<span class="jia">1799</span></div>
								</li>
								<li class="right_flow">
									<div class="dts">会员身份优惠:</div>
									<div class="dds">-￥0.00</div>
								</li>
								<li class="right_flow">
									<div class="dts">促销活动优惠:</div>
									<div class="dds">-￥0.00</div>
								</li>	
								<li class="right_flow">
									<div class="dts">运费:</div>
									<div class="dds">￥0.00</div>
								</li>
								<li class="right_flow" style="font-size: 18px;margin-bottom: 0px;margin-top: 13px;height: 30px">
									<div class="dts" style="height: 30px;line-height: 30px;">订单总价:</div>
									<div class="dds" style="color: #ed1c24;font-weight: 700;height: 30px;line-height: 30px;">￥<span class="price">2799.00</span></div>
								</li>
							</ul>
							</div>
						</div>	
				</div>
			</div>		
				<!-- 提交按钮 -->
				<div class="checkout_footer">
					<div class="tijiao_btn" style="background: #ED1C24;color: white;width: 180px;height: 36px;text-align: center;line-height: 36px;float: right;">
						提交订单
					</div>
				</div>
				
				<!-- 结算弹出层 -->
			<div class="jiesuan_footer">
				<div class="jiesuan_hold">
					<div class="jiesuan_xinxi">
						<div class="xinxi_header">
							<h4 >请确认信息</h4>
							<div class="header_gbimg">
								<img src="imgs/lingimgs/dzgb.png">
							</div>
						</div>
						<div class="xinxi_hold">
							<ul class="jsul">
								<li class="jsli">
									<span class="jsli_nm">订单单号</span>
									<span class="jsli_xz xz_danhao">430420</span>
								</li>
								<li class="jsli">
									<span class="jsli_nm">名字</span>
									<span class="jsli_xz xz_name">凌琪</span>	
								</li>
								<li class="jsli">
									<span class="jsli_nm">地址信息</span>
									<span class="jsli_xz xz_dizhi">湖南省</span>	
								</li>							
								<li class="jsli">
									<span class="jsli_nm">订单总价</span>
									<span class="jsli_xz" style="font-size: 16px;color:#ED1C24;font-weight: 600;">￥<span class="xz_price">2977.00</span></span>
								</li>							
							</ul>
						</div>
					</div>
					<div class="jiesuan_fukuan">
						<div class="fukuan_btn">
						<div class="fukuan_queren">确认付款</div>
						<div class="fukuan_xx">我再想想</div>
						</div>
					</div>
				</div>
			</div>	
			<!-- //尾部 -->	
		</div>	
		<div class="my-footer">
				<jsp:include page="include/footer.jsp"></jsp:include>
		</div>
	</body>
</html>